<template>
  <div :style="{ display: 'flex' }" id="booker">
    <el-form
      ref="ruleFormRef"
      label-position="top"
      label-width="auto"
      :model="formLabelAlign"
      style="max-width: 600px"
      :style="{ width: '500px' }"
      :rules="rules"
    >
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formLabelAlign.name" />
      </el-form-item>
      <el-form-item label="身份证号" prop="id">
        <el-input v-model="formLabelAlign.id" />
      </el-form-item>
      <el-form-item label="预约部门">
        <el-select v-model="formLabelAlign.partment" placeholder="预约部门"  @change="getDoctor">
          <el-option label="内科" value="内科" />
          <el-option label="外科" value="外科" />
          <el-option label="耳鼻喉科" value="耳鼻喉科" />
          <el-option label="妇科" value="妇科" />
          <el-option label="脑科" value="脑科" />
          <el-option label="儿科" value="儿科" />
        </el-select>
      </el-form-item>

      <el-form-item label="预约时间">
        <el-date-picker
          v-model="formLabelAlign.appointmentTime"
          type="datetime"
          placeholder="选择预约时间"
        />
      </el-form-item>

      <el-form-item label="预约医生">
        <el-select
          v-model="formLabelAlign.choose_index"
          placeholder="请选择医生"
        >
          <el-option
            v-for="(doctor,index) in doctors"
            :key="index"
            :label="doctor.doctorname"
            :value="index"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm"> 确认提交 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref ,computed } from "vue";
import type { FormProps, FormRules} from "element-plus";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import service from "../request/index";


const labelPosition = ref<FormProps["labelPosition"]>("right");

const formLabelAlign = reactive({
  name: "", // 名字
  id: "", // 身份证
  partment: "", // 预约部门
  appointmentTime: "", // 预约时间
  selectedDoctor: "", // 医生
  choose_index: null // 选择的 index 号
});

interface Doctor {
  name: string;
}

// 定义规则对象
const rules = reactive({
  name: [
    { required: true, message: "请输入姓名", trigger: "blur" },
    { min: 2, max: 10, message: "姓名长度在 2 到 10 个字符", trigger: "change" },
  ],
  id: [
    { required: true, message: "请输入身份证号", trigger: "blur" },
    { pattern: /^\d{17}[\dXx]$/, message: "身份证号码格式不正确", trigger: "change" },
  ],
});


// 医生列表
// const doctors = ref<Doctor[]>([]);
const doctors = ref([])

// 确认预约时间后, 请求相应数据
const getDoctor = async (value: any) => {
  console.log("更改部门")
  // 请求医生数据
  try {
    let data = {
      department: formLabelAlign.partment,
    };
    const res = await service.get('/doctor/Bydepartment', {
      params: data
    });
    console.log(res)
    const doctorList = res.data
    doctors.value = doctorList
    console.log("下面是 医生 数据")
    console.log(doctors.value)

  } catch (error) {
    console.error("请求医生数据失败：", error);
  }
};

const router = useRouter();
// 提交
const submitForm = async () => {
  console.log("submit!");
  // 提交数据
  let doctorId = 0
  let doctorName= ""
  if(doctors.value[formLabelAlign.choose_index]) {
    doctorId = doctors.value[formLabelAlign.choose_index].doctorid;
    doctorName =  doctors.value[formLabelAlign.choose_index].doctorname
    formLabelAlign.selectedDoctor = doctorName
  }
  // 验证
  if (!formLabelAlign.name || !formLabelAlign.id || !formLabelAlign.partment || !formLabelAlign.appointmentTime || !formLabelAlign.selectedDoctor) {
    ElMessage.warning("请填写完整信息");
    return;
  }

  const response = await service.post("/Diagnosis/createDig", {
      patientId: formLabelAlign.id,
      patientName: formLabelAlign.name,
      doctorId: doctorId,
      doctorName: doctorName,
      departMent: formLabelAlign.partment
  });
  console.log(response);
   // 判断状态码
   if(response){
  //  if (response.status === 200) {
    ElMessage.success("提交成功");
    router.push("/cacHospitel/bookView/bookmsg");
  } else {
    ElMessage.warning("请补充完整信息");
  }
};
</script>

<style scoped>
#booker {
  margin-top: 100px;
  justify-content: center;
}
</style>
